<template>
    <div v-if="store.state.isShowLogin" class="login">
        <!-- 登录内容 -->
        <el-row class="loginsize">
            <el-col :span="24">
                <span>登录</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form :model="form" :rules="rules" ref="ruleFormRef">
                    <el-form-item prop="userName">
                        <el-input v-model="form.userName" class="fillet-input" placeholder="请输入登录账号" :prefix-icon="Search"
                            size="large" round />
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input v-model="form.passWord" class="pad" placeholder="请输入登录密码" :prefix-icon="Search"
                            size="large" show-password />
                    </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary" class="confirm-button" @click="onsubmit(ruleFormRef)">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" align="right">
                <el-link :underline="false" type="primary" @click="openRegister">注册账号</el-link>
            </el-col>
        </el-row>
    </div>

    <div v-if="store.state.isShowRegister" class="register">
        <!-- 注册内容 -->
        <el-row>
            <el-col :span="12">
                <span></span>
            </el-col>
            <el-col :span="12">
                <el-link :underline="false" type="primary" @click="OpenLgin">返回登录</el-link>
            </el-col>
        </el-row>
    </div>
</template>
    
<script setup lang="ts">
import { useStore } from 'vuex'
import { ref, reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
// 引入store
const store = useStore()
// 定义一个变量，用于控制登录状态
const openRegister = () => {
    // 打开注册
    store.commit('openRegister')
    // 关闭登录
    store.commit('closeLogin')
}
// 定义一个变量，用于控制登录状态
const OpenLgin = () => {
    // 关闭注册
    store.commit('closeRegister')
    // 打开登录
    store.commit('openLogin')
}

// 定义一个变量，用于存储表单数据
const form = reactive({
    userName: '',
    passWord: ''
})
// 定义一个变量，用于存储表单验证规则
const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    passWord: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码最少长度为6', trigger: 'blur' }
    ]
})
// 定义一个变量，用于存储表单实例
const ruleFormRef = ref<FormInstance>()
// 定义一个函数，用于提交表单
const onsubmit = async (ruleFormRef: FormInstance | undefined) => {
    // 如果没有表单实例，则返回
    if (!ruleFormRef) {
        return
    }
    // 调用表单实例的验证方法
    await ruleFormRef.validate(async (valid, fields) => {
        // 如果验证成功，则显示提示信息
        if (valid) {
            ElMessage({
                message: '正在登陆...',  
                type:'success',
            })
        }
        // 如果验证失败，则显示提示信息
        else {
            console.log(fields)
            ElMessage({
                message: '请输入账号密码',        
                type: 'warning',
            })
        }
    })
}

</script>
    
<style lang="scss" scoped>
.login {
    padding: 80px 50px 50px 50px;

    .loginsize {
        font-size: 23px;
        margin-bottom: 30px;
    }

    .confirm {
        padding: 20px 0 10px 0;
    }

    .confirm-button {
        width: 100%;
    }
}
</style>